import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { loadVideo, showVideoPage } from '../../../store/actions/video.action';
import './index.css';
const mapStateToProps = state => {
    return {
        video: state.video
    }
} 
const mapDispatchToProps = dispatch => {
    return { 
        showVideoPage: (...args) => dispatch(showVideoPage(...args)),
        loadVideo: (...args) => dispatch(loadVideo(...args))
    }
}
const VideoTile = ({ vdata, video, showVideoPage, loadVideo }) => {
    useEffect(() => {
        if (vdata) {
            console.log("video: ", vdata);
        }
    })
    function clickVideo() {
        showVideoPage(true);
        loadVideo(vdata.data);
    }
    return (
        <div className="video-tile-container" onClick={() => clickVideo()}>
            <div className="preview-area">
                <img src={vdata && vdata.data ? vdata.data.previewUrl : ''}></img>
            </div>
            <div className="title-area">
                {
                    vdata && vdata.data ? vdata.data.title : ''
                }
            </div>
        </div>
    )
}

export default connect(mapStateToProps, mapDispatchToProps)(VideoTile);